import React from 'react'
import { history } from 'umi'
import { PageContainer } from '@ant-design/pro-layout'
import { Button, Tooltip, Dropdown, Menu, Input, Card } from 'antd'
import { EllipsisOutlined, QuestionCircleOutlined, SearchOutlined } from '@ant-design/icons'
import { ProColumns } from '@ant-design/pro-table'
import ProTable, { TableDropdown } from '@ant-design/pro-table'
import { list } from '@/services/order/api'

const Order = () => {

  const columns = [
    {
      title: '商品描述',
      dataIndex: 'items',
      render: items => {
        const ps = items.map(item => {
          return <p>{item.prod_name}</p>
        })
        return <div>{ps}</div>
        // console.log(items)
      },
      // // 自定义筛选项功能具体实现请参考 https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel
      // filterDropdown: () => (
      //   <div style={{ padding: 8 }}>
      //     <Input style={{ width: 188, marginBottom: 8, display: 'block' }} />
      //   </div>
      // ),
      // filterIcon: filtered => (
      //   <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
      // ),
    },
    {
      align: 'center',
      title: '单价/数量',
      width: 100,
      dataIndex: 'items',
      render: items => {
        const ps = items.map(item => {
          return (
            <p>
              {item.price}/{item.prod_count}
            </p>
          )
        })
        return <div>{ps}</div>
        // console.log(items)
      },
    },
    {
      width: 200,
      align: 'center',
      title: '买家/收货人',
      // dataIndex: ['status','memo'],
      initialValue: 'all',
      filters: true,
      onFilter: true,
      render: (text, record, index) => {
        return (
          <div>
            <p>{record.creator}</p>
            <Card style={{ backgroundColor: '#f0f2f5' }} bodyStyle={{ padding: 14 }}>
              <p style={{ margin: 0 }}>{record.phone}</p>
              <p style={{ margin: 0 }}>{record.addressee}</p>
            </Card>
          </div>
        )
      },
      valueEnum: {
        all: { text: '全部', status: 'Default' },
        // close: { text: '关闭', status: 'Default' },
        running: { text: '运行中', status: 'Processing' },
        online: { text: '已上线', status: 'Success' },
        error: { text: '异常', status: 'Error' },
      },
    },
    {
      width: 100,
      align: 'center',
      title: '实付金额',
      dataIndex: 'total',
      ellipsis: true,
    },
    {
      width: 100,
      align: 'center',
      title: '支付方式',
      dataIndex: 'payType',
      ellipsis: true,
    },
    {
      width: 100,
      title: '订单状态',
      dataIndex: 'status',
      render: status => {
        return status.name
      },
    },
    {
      title: '操作',
      width: 100,
      key: 'option',
      valueType: 'option',
      render: (text, record, index, action) => [
        <a key='link' onClick={() => history.push({
          pathname: '/order/detail',
          query: {
            id: record.id,
          },
        })}>详情</a>,
        // <a key="link2">报警</a>,
        // <a key="link3">监控</a>,
        <TableDropdown
          key='actionGroup'
          menus={[
            { key: 'copy', name: '复制' },
            { key: 'delete', name: '删除' },
          ]}
        />,
      ],
    },
  ]

  const menu = (
    <Menu>
      <Menu.Item key='1'>1st item</Menu.Item>
      <Menu.Item key='2'>2nd item</Menu.Item>
      <Menu.Item key='3'>3rd item</Menu.Item>
    </Menu>
  )

  return (
    <PageContainer content='欢迎使用 ProLayout 组件'>
      <ProTable
        columns={columns}
        request={async (
          // 第一个参数 params 查询表单和 params 参数的结合
          // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
          params,
          sort,
          filter,
        ) => {
          // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
          // 如果需要转化参数可以在这里进行修改
          const msg = await list({
            page: params.current,
            pageSize: params.pageSize,
          })
          return {
            data: msg.content,
            // success 请返回 true，
            // 不然 table 会停止解析数据，即使有数据
            success: true,
            // 不传会使用 data 的长度，如果是分页一定要传
            total: msg.total_elements,
          }
        }}
        rowKey='key'
        pagination={{
          defaultPageSize: 10,
        }}
        search={{
          layout: 'vertical',
          defaultCollapsed: false,
        }}
        dateFormatter='string'
        toolbar={{
          title: '高级表格',
          tooltip: '这是一个标题提示',
        }}
        toolBarRender={() => [
          <Button type='primary' key='primary'>
            创建应用
          </Button>,
          <Dropdown key='menu' overlay={menu}>
            <Button>
              <EllipsisOutlined />
            </Button>
          </Dropdown>,
        ]}
      />
    </PageContainer>
  )
}

export default Order
